import React, { useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
import http from '../../utils/http'
import { AddCircleOutline, AppstoreOutline, ArrowsAltOutline, ClockCircleFill, DeleteOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import { List, NavBar, TabBar } from 'antd-mobile'
import './style.css'
function Query() {
    const citySlice = useSelector(state => state.citySlice)
    const [list, setList] = useState([])
    const nav = useNavigate()

    const getTrain = async () => {
        const res = await http.post('/api/trip/train', citySlice)
        console.log(res.data)
        const { code, data } = res.data
        if (code === 200) {
            setList(data)
        }
    }
    useEffect(() => {
        getTrain()
    }, [])

    const back = () => {
        nav(-1)
    }


    return (
        <div className='query_box'>
            <NavBar onBack={back} className='nav_bg'>{citySlice.start}-{citySlice.end}</NavBar>
            <div className='query_list_box'>
                <List>
                    {list.map((item, index) => {
                        return (
                            <List.Item
                                key={index}
                                prefix={<div>{item.startTime}</div>}
                                onClick={() => { }}
                            >
                                <div className='query_list_item'>
                                    <span>
                                        <AddCircleOutline className='start_icon' />{""}
                                        {item.start}
                                    </span>
                                    <span>G103</span>
                                    <span>￥{item.tick.secondTick}</span>
                                    <span>
                                        <ClockCircleFill className='end_icon' />{""}
                                        {item.eend}
                                    </span>
                                    <span>5时39分</span>
                                    <span>{item.isSeat ? '有座' : '无座'}</span>
                                </div>
                            </List.Item>
                        )
                    })}
                </List>
            </div>

            <TabBar>
                <TabBar.Item key={'a'} icon={<AppstoreOutline/>} title={'出发 早->晚'} />
                <TabBar.Item key={'b'} icon={<ArrowsAltOutline/>} title={'只看动车/高铁'} />
                <TabBar.Item key={'c'} icon={<DeleteOutline/>} title={'只看车票'} />
            </TabBar>
        </div>
    )
}

export default Query
